<template>
  <div class="container flex">
    <div class="side-bar">
      <h2>全部分类</h2>
      <ul>
        <li
          :class="{ active: appTabType == item.value }"
          v-for="item in appTabs"
          :key="item.value"
          @click="onAppTab(item)"
        >
          <span>{{ item.label }}</span>
          <el-icon v-if="item.value === ''"><ArrowRight /></el-icon>
        </li>
      </ul>
    </div>
    <div class="con-box">
      <div class="search-wrap">
        <el-button
          class="create-btn"
          type="primary"
          @click="$router.push('/application/create')"
        >
          创建应用
        </el-button>
        <el-input
          class="input"
          placeholder="搜索"
          v-model="keyword"
          :suffix-icon="Search"
        ></el-input>
      </div>
      <div class="content flex">
        <application
          :keyword="keyword"
          :subType="appTabType"
          :pageNo="pageNo"
          v-model:total="total"
          v-model:pageSize="pageSize"
        ></application>
      </div>
      <pagination-comp
        v-model:pageNo="pageNo"
        v-model:pageSize="pageSize"
        v-model:total="total"
      ></pagination-comp>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import Application from './components/Application.vue'
import paginationComp from '@/components/pagination/pagination.vue'

import { ref } from 'vue'

type tabData = {
  label: string
  value: number | string
}

const appTabType = ref<number | string>('')
const appTabs = ref<tabData[]>([
  { label: '所有流程', value: '' },
  { label: '常规应用', value: 1 },
  { label: '多组学', value: 2 },
  { label: '单细胞组学', value: 3 },
  { label: '空间组学', value: 4 },
])
const onAppTab = (item: tabData) => {
  appTabType.value = item.value
}

// 搜索关键字
const keyword = ref<string>('')

const pageNo = ref(1)
const total = ref(0)
const pageSize = ref(9)
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  border-radius: 5px;

  .side-bar {
    width: 190px;
    padding: 23px 19px;
    border-right: 1px solid #f2f2f2;

    h2 {
      padding-bottom: 12px;
      font-size: 20px;
      font-weight: 500;
      color: #021429;
    }

    ul {
      margin-top: 13px;

      li {
        display: flex;
        justify-content: space-between;
        padding: 10px 10px 10px 16px;
        margin: 13px 0;
        font-size: 14px;
        color: #4e5969;
        cursor: pointer;
        border-radius: 4px;

        &.active,
        &:hover {
          color: #fff;
          background-color: $primary;
        }
      }
    }
  }

  .con-box {
    flex: 1;
    padding: 14px 16px;

    .search-wrap {
      overflow: hidden;

      .input,
      .create-btn {
        float: right;
      }

      .input {
        width: 190px;
        margin-right: 27px;
      }
    }

    .content {
      flex-wrap: wrap;
      padding: 20px 0;
    }
  }
}
</style>
